<!--
 * @FilePath     : /study_code/vue2.x/api/vm.$slots.html
 * @Description  : 实例的 $slots
 * @Date         : 2025-05-06 10:06:23
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-05-06 10:06:23
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <div id="app">
      <blog-post>
        <template v-slot:header>
          <h1>About Me</h1>
        </template>

        <p>
          Here's some page content, which will be included in vm.$slots.default, because it's not
          inside a named slot.
        </p>

        <template v-slot:footer>
          <p>Copyright 2016 Evan You</p>
        </template>

        <p>If I have some content down here, it will also be included in vm.$slots.default.</p>
      </blog-post>
    </div>

    <script src="/vue/dist/vue.min.js"></script>
    <script src="./common.js"></script>
    <script>
      Vue.component('blog-post', {
        render: function (createElement) {
          var header = this.$slots.header
          var body = this.$slots.default
          console.log('body', body)
          var footer = this.$slots.footer
          return createElement('div', [
            createElement('header', header),
            createElement('main', body),
            createElement('footer', footer),
          ])
        },
      })

      var app = new Vue({
        el: '#app',
        data: function () {
          return {}
        },
      })
    </script>
  </body>
</html>
